<template>
    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
        <FormItem prop="userName">
            <Input v-model="form.userName" placeholder="请输入手机号">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
            </Input>
        </FormItem>
        <FormItem prop="verify">
            <Input v-model="form.verify" style="width: 80px;">
            </Input>
            <img style="height: 32px; margin: auto 0;line-height: 1.5;vertical-align:middle;margin-left: 5px;" @click="changeVerifyImg" :src="verifyImg"/>
            <span style="margin-left: 5px;">点击刷新</span>
        </FormItem>
        <FormItem>
            <Button @click="handleSubmit" type="primary" long>登录</Button>
        </FormItem>
    </Form>
</template>
<script>
    import config from '@/config'
    export default {
        name: 'LoginForm',
        props: {
            userNameRules: {
                type: Array,
                default: () => {
                    return [
                        {required: true, message: '账号不能为空', trigger: 'blur'}
                    ]
                }
            },
            passwordRules: {
                type: Array,
                default: () => {
                    return [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ]
                }
            },
            verifyRules: {
                type: Array,
                default: () => {
                    return [
                        {required: true, message: '验证码不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        data() {
            return {
                form: {
                    userName: '',
                    password: '',
                    verify: ''
                },
                verifyImg: config.baseUrl.pro+'verify'
            }
        },
        computed: {
            rules() {
                return {
                    userName: this.userNameRules,
                    password: this.passwordRules,
                    verify: this.verifyRules
                }
            }
        },
        methods: {
            handleSubmit() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.$emit('on-success-valid', {
                            userName: this.form.userName,
                            password: this.form.password,
                            verify:this.form.verify
                        })
                    }
                })
            },
            changeVerifyImg() {
                this.verifyImg = config.baseUrl.pro+'verify?time='+Date.parse(new Date())
            }
        },
    }
</script>
